<template>
		<div class="ele-body">
			<el-row class="oneRow">
				<!-- 第一行按钮 -->
					<el-col class="oneColSwitch">
					<el-tooltip class="item" effect="dark" content="是否显示汇总数据" placement="top-start">
						<vxe-switch v-model="sfxs" open-label="显示" :open-value="1" close-label="不显" :close-value="0" size="mini" v-if="bc" @change="changeXs"></vxe-switch>
					</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="保存" placement="top-start">
							<vxe-button class="oneButton" v-if="bc" @click="saveSp">保存</vxe-button>
						</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="重置" placement="top-start">
							<vxe-button class="oneButton" v-if="bc" @click="clearSp">重置</vxe-button>
						</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="引入" placement="top-start">
							<vxe-button class="oneButton" v-if="xz" @click="spsxQd">引入</vxe-button>
						</el-tooltip>
					</el-col>
					<el-col class="oneCol">
						<el-tooltip content="上传图片" placement="top-start">
							<vxe-button class="oneButton" v-if="bc" @click="scTp">上传</vxe-button>
						</el-tooltip>
					</el-col>
			</el-row>
			
			<!-- 第二行按钮 -->
				<el-row class="twoRow">
					<el-col class="twoCol">
						<span class="spanClass">编号：</span>
							<el-autocomplete
							v-model="selectSpbh"
							:fetch-suggestions="querySp"
							placeholder="请选择或输入款号"
							:show-word-limit="false"
							:clearable="true"
							:disabled="Disabled"
							@clear="handleClear"
							@select="handleSelect">
							<template slot-scope="{ item }" >
							<span style="float: left">{{ item.name}}&nbsp;</span>
							<span style="float: right; color: #666666; font-size: 13px">{{ item.code }}</span>
							</template>
							</el-autocomplete>
							
					</el-col>
					<el-col class="twoCol">
						<span class="spanClass">商品名称：</span>
							<el-input class="twoInput" v-model="selectSpmc"   clearable placeholder="商品名称">
							</el-input>
					</el-col>
				</el-row>
				
				<!-- 第三行表格 -->
		<div class="tableDiv">
			<el-row>
				<el-col class="ysy-table1">
					<vxe-toolbar  custom>
						<template v-slot:buttons>
							<el-row class="threeRow">
							<span class="spanClass">备注：</span>
							<vxe-input class="threeInput" v-model="inputBz"></vxe-input>
							</el-row>
						</template>
					</vxe-toolbar>
					<vxe-table 
					auto-resize 
					ref="refTable1"
					border 
					show-header-overflow 
					show-overflow
					highlight-hover-row
					height="85%"
					class="mytable-scrollbar" 
					size="mini"
					highlight-current-row 
					resizable
					@cell-click="table1CellCliick"
					:data="table1"
					:loading="spmxLoading"
					:sortable="sortableConfig"
					>
					<vxe-table-column type="checkbox" width="40"></vxe-table-column>
					<vxe-table-column type="seq" title=" " width="40"></vxe-table-column>
					<vxe-table-column field="spbh" title="商品编号" min-width="90" align="center" ></vxe-table-column>
					<vxe-table-column field="spmc" title="商品名称" min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="bz" title="备注" min-width="120" align="center" ></vxe-table-column>
					<vxe-table-column field="action" title="操作" min-width="60" align="center" v-if="bc">
					<template v-slot="{ row }">
						<vxe-button type="text" status="danger" content="删除" size="mini"  @click="table1DelEvent(row)"></vxe-button>
					</template>
					</vxe-table-column>
					<vxe-table-column field="create_time" title="创建时间" min-width="90" align="center" :visible="false"></vxe-table-column>
					</vxe-table>

				</el-col>
			</el-row>
		</div>
		<div>
			<vxe-button class="qrButton" v-if="xz" @click="sfXz()" >新增</vxe-button>
			<vxe-button class="qrButton" v-if="bc" @click="sfXz('xz')" >选择</vxe-button>
		</div>
	
	</div>
</template>

<script>
	
	export default{
		
		data() {
			return{
				spList:[] ,
				selectSpbh:'',
				table1:[],
				selectSpmc:'',
				selectSpmc2:'',//老的商品名称
				inputBz:'',
				inputBz2:'',//老的商品备注
				Disabled:false, //是否被禁用
				spmcList:[],
				spmxLoading:false,
				sortableConfig:true,
				sfxk:0,//是否新商品
				sfid:'',//是否id
				selectId:null,
				bc:false,
				xz:false,
				cz:false,
				sfxs:0
				
			}
		},
	methods:{
		saveSp(){
			if(this.selectSpbh == null || this.selectSpbh == ''){
				this.$message.info("请输入商品编号")
				return;
			}
			
			if(this.selectSpmc == null || this.selectSpmc == ''){
				this.$message.info("请输入商品名称")
				return;
			}
			
			if(this.sfxk==1 && this.selectSpmc != this.selectSpmc2||this.inputBz!=this.inputBz2){
				this.$confirm('商品名称或备注有改动，确定修改商品名或备注吗?', '提示', {
					type: 'warning'
				}).then(() => {
					this.updateSp(this.selectSpbh,this.selectSpmc,this.inputBz);
				})
			}else{
				this.$http.post("/scm/scm/xsmx/saveSp",{
					spbh : this.selectSpbh,
					spmc : this.selectSpmc,
					bz : this.inputBz
				}).then(res => {
					//console.log(res,'res');
					if(res.data.code == 0){
						this.$message.success(res.data.msg)
						this.selectSpbh = null
						this.selectSpmc =null
						this.inputBz=null
						this.selectAll();
						// 保存成功后刷新页面
						location.reload();
					}else{
						this.$message.info(res.data.msg)
					}
				})
			}	
		},
		//是否显示汇总数据
		changeXs(){
			this.selectAll(this.sfxs);
		},
		//新增勾选的商品
		spsxQd(){
			var selectList = this.$refs.refTable1.getCheckboxRecords();
			//console.log(selectList,'selectList');
			if(selectList == null || selectList.length <= 0){
				this.$message.info("请选择商品");
				return;
			}
			var spList = [];
			for(var i of selectList){
				spList.push(i.id)
			}
			this.$http.post("/scm/scm/xsmx/spxzqd",{
				spList:spList,
				id:this.selectId,
				khid:this.khid,
			}).then(res => {
				if(res.data.code == 0){
					this.$message.success(res.data.msg)
					this.$emit('selectAll',true);
				}else{
					this.$message.info(res.data.msg)
				}
			})
			this.showTable1 = false
		},
		table1DelEvent(row){
			this.$confirm('确定要删除此行结果吗?', '提示', {
				type: 'warning'
			}).then(() => {
			this.$http.post("/scm/scm/xsmx/deleteSp",{
				spbh:row.spbh,
				spmc:row.spmc,
				id:row.id
			}).then(res => {
				if(res.data.code == 0){
					this.$message.success(res.data.msg)
					this.selectAll();
				}else{
					this.$message.info(res.data.msg)
				}
			})
		}
		)},
		updateSp(spbh,spmc,bz){
			// console.log(khmc,'khmc');
			this.$http.post("/scm/scm/xsmx/updateSp",{
				spbh:spbh,
				spmc:spmc,
				bz:bz,
			}).then(res=>{
				this.$message.success(res.data.msg)
				this.selectAll();
			})
		},
		querySp(keyWord, callback) {
			//console.log('进入');
			if (keyWord != null && keyWord.length>0) {
				
				this.$http.post("/scm/scm/xsmx/splist",{
					code : keyWord,
					limit:30
					}).then(res => {
					if(res.data.code === 0){
						this.spList = res.data.data;
						//console.log(this.khList,'khList');
						callback(this.spList);
					}else{
						callback([]);
					}
				})
				}else{
                callback([]);
            }
		},
		handleClear() {
			this.selectspbh = '';
		},
		handleSelect(item) {
			//console.log(item,'item');
			// 处理选中某个选项的操作
			this.selectSpbh = item.code;
			this.selectSpmc = item.name;
			this.selectSpmc2 = item.name;
			this.inputBz = item.bz;
			this.inputBz2 = item.bz;
			this.sfxk=1;
		},
		table1CellCliick(row){
			//console.log(row,'row');
			this.selectSpbh = row.row.spbh;
			this.selectSpmc = row.row.spmc;
			this.selectSpmc2 = row.row.spmc;
			this.inputBz = row.row.bz;
			this.inputBz2 = row.row.bz;
			this.Disabled=true;//禁用编号更改
			this.sfxk=1;
		},
		clearSp(){
			this.selectSpbh = '';
			this.selectSpmc = '';
			this.selectSpmc2 = '';
			this.sfxk=0;
			this.Disabled=false;//禁用编号更改
			
		},
		sfXz(lx,id){
			if (lx=='xz'){
				this.sfid=1;
				this.selectAll();
				this.xz=true;
				this.bc=false;
			}else if(lx=='xg'){
				//console.log('进入')
				this.sfid=1;
				this.selectId=id;
				this.selectAll();
				this.xz=true;
				this.bc=false;
			}else{
				this.sfid='';
				this.selectAll();
				this.xz=false;
				this.bc=true;
			}
			
		},
		scTp(){
			//console.log('进入');
			var selectList = this.$refs.refTable1.getCheckboxRecords();
			//console.log(selectList,'selectList');
			//console.log(selectList.length,'selectList');
			if(selectList.length!=1){
				this.$message.info("请勾选一条商品");
				return;
			}
			
			this.$emit('spImport',selectList[0].spbh);
			
		},
		selectAll(hzxs){
			//查询已存在的商品
			this.$http.post("/scm/scm/xsmx/selectSp",{
				sfid:this.sfid,
				sfhz:hzxs
			}).then(res => {
				//console.log(res);
				this.table1  = res.data;
				})
			},
		},
		mounted(){
			// this.$emit('yxkh');
			//this.selectAll();
		}
	}
</script>

<style scoped>
	.oneRow{
		border-bottom: 1px solid lightgray;
	}
	.oneCol{
		width: 57px;
		
	}
	.oneColSwitch{
		width: 63px;
		align-self: flex-end;
	}
	.oneButton{
		width: 60px;
		height: 30px;
	}
	.twoRow{
		display: flex;
	}
	.twoCol{
		width: 250px;
		margin-top: 10px;
		margin-left: 5px;
	}
	.twoInput{
		height: 30px;
		width: 180px;
	}
	.threeRow{
		margin-left: 5px;
		margin-top: 0px;
	}
	.threeInput{
		width: 85%;
		height: 30px;
	}
	.spanClass{
		font-weight: bold;
	}
	.tableDiv{
		margin-top: 0px;
		height: 90%;
	}
	.ysy-table1 {
		font-weight: 500;
	}
	.qrButton{
		margin-top: 10px;
		margin-right: 5px;
		float: right;
	}
	
	
</style>
